<template>
	<div class="topPanel bg-gray">
		<div class="-goback" @click="com.goBack()"></div>
		<div class="appTitle">章鱼借阅</div>
	</div>
	<view class="bg-gray h-100">
		<div class="record-list">
			<template v-if="record.length<1">
				<div class="d-flex a-center j-center text-gray text-center" style="height:calc(100vh - 110px);">
					<div>
						<img src="https://www.zyts.cc/static/wx_xcx/empty.png" style="display:block;width:130px;height:110px;margin:0 auto;" />
						<div class="text-center text-small text-gray" style="margin-top: 10px;">暂时没有订单</div>
					</div>
				</div>
			</template>
			<template :key="index" v-for="(item,index) in record">
				<div class="record-item">
					<div class="d-flex a-center">
						<template v-if="item.vipWay">
							<div class="-vip text-primary"></div>
						</template>
						<template v-else>
							<div class="-device"></div>
						</template>
						<div class="f1" style="padding-left: 5px;">{{item.jy_name}}</div>
						<div :class="item.status==='2'?'text-small text-primary':'text-small text-gray'">
							{{item.status==='2'?'已还书':'借阅中'}}
						</div>
					</div>
					<div class="recordInner d-flex a-center w-100">
						<div class="bg-gray -tmpImg" :style="'background-image:url(\''+item.goods_image+'\');'"></div>
						<div class="w80 f1">
							<!-- w125 -->
							<div class="text-bold text-large text-ellipsis">{{item.goods_name}}</div>
							<div class="text-gray text-small" style="margin-top: 5px;">{{item.add_time}}</div>
						</div>
						<!-- <div class="text-bold text-right" style="max-width:35px;min-width: 35px;">{{item.rent}}</div> -->
					</div>
					<div class="content" v-if="item.vip_order === '1'">
						<div class="btn" style="width:20%;margin:20px auto;display: block;" @click="makeOrder">去支付</div>
					</div>
				</div>
			</template>
		</div>
		<div v-if="finishi===true && record.length>0" class="text-center text-gray" style="padding-bottom: 50px;">已没有更多数据</div>
	</view>
	
	<div class="payWayList" v-if="showPayWayList==true">
		<div class="inner">
			<div class="title d-flex a-center">
				<span class="f1">支付方式</span>
				<span style="font-size: small;font-weight: normal;" @click="showPayWayList=false">取消</span>
			</div>
			<div class="content">
				<template :key="index" v-for="(item,index) in payWays">
					<div :class="index===current_payWay?'payWayItem d-flex a-center active':'payWayItem d-flex a-center'"
						@click='current_payWay=item.payment_state=="1"?index:-1'>
						<div class="bg-image"
							:style="'background-image:url(\''+item.payment_img+'\');width:30px;height:30px;margin-right:10px;border:solid 1px whitesmoke;border-radius:100px'">
						</div>
						<div>{{item.payment_name}} </div>
					</div>
				</template>
			</div>
			<div class="content">
				<div class="btn" style="width:70%;margin:20px auto;display: block;" @click="doPay">确定</div>
			</div>
		</div>
	</div>
</template>

<script>
	import com from '../common/index.js'
	export default {
		data() {
			return {
				cur_status: '0',
				com: com,
				finishi:false,
				page:1,
				record: [],
				orderData: {},
				showPayWayList: false,
				payWays: [{
					payment_code: "mini_wxpay",
					payment_id: "5",
					payment_img: "https://www.zyts.cc/static/wx_xcx/Group4@2x.png",
					payment_name: "微信支付",
					payment_state: "1",
					payment_state_text: "开启中",
				}],
				current_payWay: -1
			}
		},
		methods: {
			getList() {
				const that = this
				const key = uni.getStorageSync('uToken')
				uni.request({
					url: that.com.serviceURL+'/cmobile/index.php?app=borrowing_info&mod=get_order_list&key=' + key + '&pn=' + that.page +
						(that.cur_status === '0' ? '' : '&status=' + that.cur_status),
					success: e => {
						that.finishi=(!e.data.page_count.hasmore==true)
						if (e.data.list) that.record = that.record.concat(e.data.list)
					}
				})
			},
			//创建订单
			makeOrder() {
				uni.showLoading({title:"正在创建订单"})
				
				const key = uni.getStorageSync('uToken')
				const that = this
				uni.request({
					method: 'get',
					url: that.com.serviceURL+'/cmobile/index.php?app=borrowing_buy_vip&mod=books_order_xcx&key=' + key,
					data: {},
					success: data => {
						let res = data.data
						if (res.state !== 200) {
							uni.showToast({
								title: "创建订单失败"
							})
							uni.hideLoading()
							return
						}
						that.orderData = {
							pay_sn: res.pay_sn,
							order_sn: res.order_sn,
							total: res.total,
							payment_code: res.payment_code
						}
						
						that.getPayWays()
					}
				})
			},
			// 获取支付方式
			getPayWays() {
				const that = this;
				const key = uni.getStorageSync('uToken');
				uni.request({
					method: 'get',
					url: that.com.serviceURL+'/cmobile/index.php?app=borrowing_info&mod=getPaymentList&paytype=product_buy&client=jy_xcx&key='+ key,
					data: {},
					success: data => {
						let res = data.data
						if (res.state !== 200) {
							uni.showToast({
								title: "获取数据失败"
							})
							uni.hideLoading()
							return
						}
						that.showPayWayList = true
						that.payWays = res.data
						that.current_payWay=0
						uni.hideLoading()
					}
				})

			},
			doPay(){
				uni.showLoading({
					title:"请稍后"
				})
				const that = this
				console.log(that);
				
				if (this.current_payWay < 0) {
					uni.hideLoading()
					uni.showToast({
						title: "请选择支付方式",
						icon: 'error'
					})
					return
				}
				// key,pay_sn,payment_code,password,order_id
				uni.login({
					success: code => {
					
						const key = uni.getStorageSync('uToken')
						let data = {
							key: key,
							pay_sn: that.orderData.pay_sn,
							payment_code: that.payWays[that.current_payWay].payment_code,
						}
						
						uni.request({
							url: that.com.serviceURL+"/cmobile/index.php?app=borrowing_pay&mod=pay_new_xcx&code=" +
								code.code,
							method: 'POST',
							header: {
								'Content-Type': 'application/x-www-form-urlencoded'
							},
							data: data,
							success: r => {
								uni.hideLoading()
								const res=r.data
								console.log(res)
								
								if(res.state!==200){
									uni.hideLoading()
									uni.showToast({
										title:"请求支付错误",
										icon:"error"
									})
									return
								}
								if (res.info) {
									//调起微信支付
									uni.requestPayment({
										'timeStamp': res.info.timeStamp,
										'nonceStr': res.info.nonceStr,
										'package': res.info.package,
										'signType': 'MD5',
										'paySign': res.info.paySign,
										'success': function(res) {
											//关闭当前页面进入订单列表页面
											that.showPayWayList=false
											uni.showToast({
												title: '支付成功',
												duration:2000,
												success:()=>{
													uni.navigateTo({
														url:"/pages/userhome"
													})
												}
											});
										},
										'fail': function(res) {}
									});
								} else {
									uni.showToast({
										title: res.msg
									});
								}
							}
						})
					}
				})
				
				
			}
		},
		onLoad(opt) {
			if (opt.action) {
				this.cur_status = opt.action.toString()
				this.getList()
			}
		},
		onReachBottom(){
			if(this.finishi!==true){
				this.page=this.page+1
				this.getList()
			}
		}
	}
</script>

<style>
	.w125 {
		max-width: calc(100% - 135px);
	}

	.w80 {
		max-width: calc(100% - 80px);
	}
</style>